{{setTitle     "表单"}}
{{setSubTitle  "简单的HTML表单样式"}}
{{setActiveNav "forms"}}

{{> header}}

<div class="content">

    <h2 class="content-subhead">默认表单</h2>
    <p>
      给{{code "<form>"}}添加类名{{code "pure-form"}}，就可以创建一个默认的表单
    </p>

  {{#prefixIds "default"}}
    {{> forms/default}}
  {{/prefixIds}}

  {{#code}}
    {{> forms/default}}
  {{/code}}


    <h2 class="content-subhead" id="stacked-form">叠放式表单</h2>
    <p>
        叠放式表单就是指input元素在标签下面，在默认表单的基础上，再添加一个类名{{code "pure-form-stacked"}}就可以实现。
    </p>

  {{#prefixIds "stacked"}}
    {{> forms/stacked}}
  {{/prefixIds}}

  {{#code}}
    {{> forms/stacked}}
  {{/code}}


    <h2 class="content-subhead">对齐式表单</h2>
    <p>
        在默认表单的基础上，增加一个类名{{code "pure-form-aligned"}}就可以实现对齐式表单。其中，标签是右对齐的，但在小屏幕上，看起来跟<a href="#stacked-form">叠放式表单</a>一样。
    </p>

  {{#prefixIds "aligned"}}
    {{> forms/aligned}}
  {{/prefixIds}}

  {{#code}}
    {{> forms/aligned}}
  {{/code}}

    <h2 class="content-subhead">多列表单(使用网格模块)</h2>
    <p>
      在一个<a href="{{pages.grids}}">网格</a>里面，包含表单元素就可以创建多列的表单了。下面就是一个应用了网格的例子：
    </p>

  {{#prefixIds "multi"}}
    {{> forms/multi}}
  {{/prefixIds}}

  {{#code}}
    {{> forms/multi}}
  {{/code}}

    <h2 class="content-subhead">分组</h2>
    <p>
        把相关的文本说明和input元素用{{code "<fieldset>"}}元素包裹起来，然后再添加一个类名{{code "pure-group"}}，就可以把input元素分组。分组很适合应用在注册表单，且在移动设备表现得也不错。
    </p>

  {{#prefixIds "grouped"}}
    {{> forms/grouped}}
  {{/prefixIds}}

  {{#code}}
    {{> forms/grouped}}
  {{/code}}


    <h2 class="content-subhead">设置Input的大小</h2>
    <p>
        你也可以给Input元素添加类名{{code "pure-input-*"}}，使它拥有流动的宽度，使用方法很像<a href="{{pages.home}}">Pure的网格</a>的使用。
    </p>

  {{#prefixIds "input-size"}}
    {{> forms/input-size}}
  {{/prefixIds}}

  {{#code}}
    {{> forms/input-size}}
  {{/code}}

    <p>
        你可以通过用一个网格容器包含{{code "<input>"}}元素，来控制它的大小。 如下例子，{{code "<input>"}}元素有一个类名为{{code "pure-input-1"}}，但它是被一个有着特定网格类名的{{code "<div>"}}元素包含着。
    </p>

  {{#prefixIds "input-grid"}}
    {{> forms/input-grid}}
  {{/prefixIds}}

  {{#code}}
    {{> forms/input-grid}}
  {{/code}}


    <h2 class="content-subhead">必填的输入框</h2>
    <p>
        增加{{code "required"}}属性，要求该输入框是必填的。
    </p>

  {{#prefixIds "invalid"}}
    {{> forms/invalid}}
  {{/prefixIds}}

  {{#code}}
    {{> forms/invalid}}
  {{/code}}


    <h2 class="content-subhead">禁用输入框</h2>
    <p>
        增加一个{{code "disabled"}}的属性。
    </p>

  {{#prefixIds "disabled"}}
    {{> forms/disabled}}
  {{/prefixIds}}

  {{#code}}
    {{> forms/disabled}}
  {{/code}}


    <h2 class="content-subhead">圆角输入框</h2>
    <p>
        通过添加类名{{code "pure-input-rounded"}}就可以使input有圆角效果。
    </p>

  {{#prefixIds "rounded"}}
    {{> forms/rounded}}
  {{/prefixIds}}

  {{#code}}
    {{> forms/rounded}}
  {{/code}}


    <h2 class="content-subhead">复选框和单选按钮</h2>
    <p>
      给类名添加{{code "pure-checkbox"}}或者{{code "pure-radio"}}，可以让复选框和单选按钮排列整齐。
    </p>

  {{#prefixIds "checkbox-radio"}}
    {{> forms/checkbox-radio}}
  {{/prefixIds}}

  {{#code}}
    {{> forms/checkbox-radio}}
  {{/code}}
</div>
